<template>
  <div class="orderGoods">
    <div class="orderGoods_title clearfix">
      <ul ref="title_tab">
        <li class="current"><a href="javascript:void(0);">全部(<span>{{ title_all }}</span>)</a></li>
        <li><a href="javascript:void(0);">进行中(<span>{{ title_underway }}</span>)</a></li>
        <li><a href="javascript:void(0);">待收款(<span>{{ title_agencyFund }}</span>)</a></li>
        <li><a href="javascript:void(0);">已完成(<span>{{ title_ok }}</span>)</a></li>
      </ul>
    </div>
    <div class="orderGoods_content" ref="Content">
        <ul class="current">
            <li v-for="(item,index) in lists" @click="$router.push('/LineItem')">
              <h4 class="title_h4">
                <img :src="item.logo" alt="">{{ item.title }}
                <a href="javascript:void(0);">{{ item.title_btn }}</a>
              </h4>
              <div class="content_text clearfix">
                <img :src="item.img" alt="">
                <div class="contentText_right">
                  <h4>{{ item.contentTitle }}</h4>
                  <p>{{ item.contentData }} {{ item.contentTime }}</p>
                  <div class="univalence clearfix">
                    <div class="univalence_left clearfix">
                      金额：<span>{{ item.univalenceNum }}元/天</span>
                    </div>
                    <span class="univalence_amount">x{{ item.univalenceAmount }}</span>
                  </div>
                </div>
              </div>
              <div class="total">
                合计：<span>{{ item.totalNumber }}元</span>
                <button v-show="item.show">{{ item.totalBtn }}</button>
              </div>
              <div class="download clearfix" v-show="item.show"><span>{{ item.downloadTtext }}</span><a href="javascript:void(0);">立即下载</a></div>
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in lists" @click="$router.push('/LineItem')">
              进行中...
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in lists" @click="$router.push('/LineItem')">
              待收款...
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in lists" @click="$router.push('/LineItem')">
              已完成...
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'orderGoods',
  data () {
    return {
      title_all:10,
      title_underway:2,
      title_agencyFund:4,
      title_ok:8,
      lists:[
        {
            logo:'./static/images/a.jpg',
            title:'美尚股份有限公司',
            title_btn:'等待同意',
            img:'./static/images/1.jpg',
            contentTitle:'高端家政服务',
            contentData:'8月28日',
            contentTime:'11:00-17:00',
            univalenceNum:45,
            univalenceAmount:2,
            totalNumber:120,
            totalBtn:'开工打卡',
            downloadTtext:'下载客户端方能操作',
            show:true
        },
        {
          logo:'./static/images/a.jpg',
          title:'美尚股份有限公司',
          title_btn:'等待同意',
          img:'./static/images/1.jpg',
          contentTitle:'高端家政服务',
          contentData:'8月28日',
          contentTime:'11:00-17:00',
          univalenceNum:45,
          univalenceAmount:2,
          totalNumber:120,
          totalBtn:'开工打卡',
          downloadTtext:'下载客户端方能操作',
          show:false
        },
        {
          logo:'./static/images/a.jpg',
          title:'美尚股份有限公司',
          title_btn:'等待同意',
          img:'./static/images/1.jpg',
          contentTitle:'高端家政服务',
          contentData:'8月28日',
          contentTime:'11:00-17:00',
          univalenceNum:45,
          univalenceAmount:2,
          totalNumber:120,
          totalBtn:'收工打卡',
          downloadTtext:'下载客户端方能操作',
          show:true
        }
      ]
    }
  },
  mounted(){
    var tabs = this.$refs.title_tab.children;
    var contents = this.$refs.Content.children;

    for(var i=0;i<tabs.length;i++){
        var tab = tabs[i];
          tab.setAttribute('index',i);
          tab.onclick = function () {
              for(var i=0;i<tabs.length;i++){
                tab = tabs[i];
                tab.removeAttribute('class');
              }
              this.setAttribute('class','current');
              //内容切换
              var tabIndex = this.getAttribute('index');
                  for(var i=0;i<contents.length;i++){
                      var content = contents[i];
                      content.removeAttribute('class');
                  }
              content = contents[tabIndex];
              content.setAttribute('class','current');
          }
    }

  },
  methods:{}
}
</script>

<style scoped>
  .orderGoods{background: #f7f7f7;}
  .orderGoods_title{padding:0 3%;background: #fff;position:fixed;top:0;left:0;background: #fff;width:94%;z-index: 999;}
  .orderGoods_title li{width:25%;font-size: 1rem;float: left;text-align: center;}
  .orderGoods_title li span{font-size: .8rem;}
  .orderGoods_title li a{color:#333;display: inline-block;line-height: 3rem;/*border-bottom:2px solid #ffaf23;*/}
  .orderGoods_title li.current a{border-bottom:1px solid #ffaf23;color:#ffaf23;}
  .orderGoods_content{margin-top: 3.6rem;}
  .orderGoods_content ul{display: none;}
  .orderGoods_content ul.current{display:block;}
  .orderGoods_content li{background: #fff;padding:0 1rem;margin-top: .6rem;}
  .title_h4{line-height: 3.2rem;font-size:.9rem;position:relative;border-bottom:1px solid #f2f2f2;}
  .title_h4 img{display: inline-block;width:1.8rem;height:1.8rem;border-radius: 50%;margin-right:2%;vertical-align: middle;}
  .title_h4 a{display: inline-block;color:#ffaf23;position:absolute;top:0;right:0;font-weight: 400;}
  .content_text{padding:1rem 0;border-bottom:1px solid #f2f2f2;font-size:.8rem;}
  .content_text img{width:35%;height:40%;display: inline-block;margin:0 3% 1% 0;float: left;}
  .contentText_right{padding-top: 1%;}
  .contentText_right h4{font-size:.9rem;line-height: 2rem;}
  .contentText_right p{color:#999;padding-bottom: .3rem;}
  .univalence_left{float:left;overflow: hidden;}
  .univalence_left span,.total span{color:red;}
  .univalence_amount{float:right;width:12%;color:#999;display: inline-block;text-align: right;}
  .total{padding:4% 25% 4% 0;position:relative;}
  .total button{border:1px solid #ddd;color:#999;padding:2% 4%;border-radius: 15px;background: none;position:absolute;top:.5rem;right:0;}
  .download{border-top:1px solid #f2f2f2;padding:.9rem 0;font-size: .9rem;}
  .download span{display: block;width:70%;float: left;color:#999;}
  .download a{display:block;width:30%;float:right;text-align: right;color:#5cbcff;}

</style>
